<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta charset="UTF-8">
    <script type="text/javascript" th:src="@{${session.baseUrl}+'js/common.js'}"></script>
    <script th:src="@{${session.baseUrl}+'js/jquery.js'}"></script>
    <link th:href="@{${session.baseUrl}+'style/reset.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/base.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/header.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/dialog.css'}" rel="stylesheet" type="text/css">
    <link th:href="@{${session.baseUrl}+'style/global.css'}" rel="stylesheet" type="text/css">
    <script th:src="@{${session.baseUrl}+'js/dialog.js'}"></script>
    <link rel="stylesheet" th:href="@{${session.baseUrl}+'style/idIdentify.css'}"/>
    <style>
        #sub{
            margin-left: 0.6rem;
            margin-right: 0.3rem;
            line-height: 0.75rem;
            width: 6.3rem;
            border-radius: 0.1rem;
            height: 0.75rem;
            font-size: 0.26rem;
            background: #2d9cff;
            color: #fff;
            margin-top: 0.1rem;
        }
    </style>
    <title>实名认证</title>
</head>
<body>
<header><span onclick="javascript:history.go(-1)"></span>实名认证</header>
        <input type="hidden" id="zhengtype" value=""><!--1代表身份证-->
        <input type="hidden" id="address" value=""><!--住址-->
        <input type="hidden" id="birthday" value=""><!--生日，格式YYYY-MM-DD-->
        <input type="hidden" id="gender" value=""><!--性别（男/女）-->
        <input type="hidden" id="id_card_number" value=""><!--身份证号-->
        <input type="hidden" id="name" value=""><!--姓名-->
        <input type="hidden" id="race" value=""><!--民族-->
        <input type="hidden" id="zhengside" value=""><!--正反面 front:人相面   back:国徽面-->


        <input type="hidden" id="fantype" value=""><!--1代表身份证-->
        <input type="hidden" id="fanside" value=""><!--正反面 front:人相面   back:国徽面-->
        <input type="hidden" id="issued_by" value=""><!--签发机关-->
        <input type="hidden" id="valid_date" value=""><!--有效期-->


     <div class="photo mt20 rel">
         <div id="imgdiv" onclick="zhengmian()">
            <img id="zmz" width="650" height="400" style="width: 6.5rem;height: 4rem;border-radius: 0.1rem;" />
         </div>
        <input type="file" accept="image/*" onchange="getzImg(this)" style="display:none" value="" id="img_z" />
    </div>
    <div class="photo mt30 rel">
        <div id="imgdiv1"  onclick="fanmian()">
            <img id="fmz" width="650" height="400" style="width: 6.5rem;height: 4rem;border-radius: 0.1rem;"/>
        </div>
        <input type="file" accept="image/*" onchange="getfImg(this)" value="" id="img_f" style="display:none"/>
    </div>
    <input type="button" id="sub" value="申请认证" onclick="renzheng()"/>


<script type="text/javascript" th:inline="javascript">
    //<![CDATA[

    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;

    function renzheng() {
        var zhengside = $("#zhengside").val();
        var fanside = $("#fanside").val();
        if(zhengside=="front"&&fanside=="back"){
            $.ajax({
                url:basePath+'/memberUser/renzheng',
                type: "post",
                dataType: "json",
                data:JSON.stringify({
                    type: $("#zhengtype").val(),
                    address: $("#address").val(),
                    birthday:$("#birthday").val(),
                    gender:$("#gender").val(),
                    idCardNumber:$("#id_card_number").val(),
                    name:$("#name").val(),
                    race:$("#race").val(),
                    issuedBy:  $("#issued_by").val(),
                    validDate:$("#valid_date").val(),
                    memberId:[[${session.memberId}]]
                }),
                contentType: 'application/json;charset=UTF-8',
                //async: false,
                success: function (data) {

                    if(data.msg=='true'){
                        $('body').dailog({type:'success',title:'实名认证',discription:'实名认证成功！'});
                        self.setInterval(function(){  // 这个方法是说在延迟3秒后执行大括号里的方法
                            location.reload();   // 这个方法是刷新当前页面
                        },3000) //这里3000代表3秒

                    }else if(data.msg=='false'){
                        $('body').dailog({type:'warning',title:'实名认证',discription:'实名认证失败！'});
                        self.setInterval(function(){  // 这个方法是说在延迟3秒后执行大括号里的方法
                            location.reload();   // 这个方法是刷新当前页面
                        },3000) //这里3000代表3秒

                    }else{
                        $('body').dailog({type:'danger',title:'实名认证',discription:'系统错误，请联系后台管理员'});
                        self.setInterval(function(){  // 这个方法是说在延迟3秒后执行大括号里的方法
                            location.reload();   // 这个方法是刷新当前页面
                        },3000) //这里3000代表3秒
                    }
                },


            });


        }else{

            $('body').dailog({type:'warning',title:'提示',discription:'请先上传身份证照，然后认证'});
            self.setInterval(function(){  // 这个方法是说在延迟3秒后执行大括号里的方法
                location.reload();   // 这个方法是刷新当前页面
            },3000) //这里3000代表3秒
        }
    }



    var zmbase64;
    var fmbase64;
    //正面
    function zhengmian(){
        $('#img_z').click();
    }
    function getzImg(imgFile){

        var file = imgFile.files[0];

        var reader = new FileReader();
        reader.readAsDataURL(file);//将文件读取为Data URL小文件   这里的小文件通常是指图像与 html 等格式的文件
        reader.onload = function(e){
            zmbase64 = e.target.result;
            tijiao(zmbase64);
            $("#zmz").attr("src",e.target.result);
        }
    }

    //反面
    function fanmian(){
        $('#img_f').click();
    }
    function getfImg(imgFile){

        var file = imgFile.files[0];

        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            fmbase64 = e.target.result;
            tijiao(fmbase64);
            $("#fmz").attr("src",e.target.result);
        }
    }

    //申请
    function checkForm(){

        if($('#img_z').val()==null||$('#img_z').val()==''){
            alert('请上传身份证正面照！');
            return false;
        }
        if($('#img_f').val()==null||$('#img_f').val()==''){
            alert('请上传身份证反面照！');
            return false;
        }

        //提交表单
    }

    function tijiao(obj) {

        $.post("https://api-cn.faceplusplus.com/cardpp/v1/ocridcard",{api_key:[[${app_key}]],api_secret:[[${api_secret}]],image_base64:obj,legality:1},function(res){
            console.log(res);

            if(res.cards.length>0){
                var legality=res.cards[0].legality['ID Photo'];


                if(legality>0.9){

                    if(res.cards[0].side=="front"){
                        console.log("side"+res.cards[0].side);
                        $("#zhengtype").val(res.cards[0].type);
                        $("#address").val(res.cards[0].address);
                        $("#birthday").val(res.cards[0].birthday);
                        $("#gender").val(res.cards[0].gender);
                        $("#id_card_number").val(res.cards[0].id_card_number);
                        $("#name").val(res.cards[0].name);
                        $("#race").val(res.cards[0].race);
                        $("#zhengside").val(res.cards[0].side);

                    }else if(res.cards[0].side=="back"){
                        console.log("side"+res.cards[0].side);
                        $("#issued_by").val(res.cards[0].issued_by);
                        $("#valid_date").val(res.cards[0].valid_date);
                        $("#fantype").val(res.cards[0].type);
                        $("#fanside").val(res.cards[0].side);
                    }
                }else{

                    $('body').dailog({type:'warning',title:'提示',discription:'请上传清晰身份证照片'});
                    self.setInterval(function(){  // 这个方法是说在延迟3秒后执行大括号里的方法
                        location.reload();   // 这个方法是刷新当前页面
                    },3000) //这里3000代表3秒
                }
            }else {

                $('body').dailog({type:'warning',title:'提示',discription:'请勿提交其他类型照片'});
                self.setInterval(function(){  // 这个方法是说在延迟3秒后执行大括号里的方法
                    location.reload();   // 这个方法是刷新当前页面
                },3000) //这里3000代表3秒
            }


        },'json');


    }


</script>
</body>
</html>